<script setup>
import {RouterLink, RouterView} from 'vue-router'
import {ref, watch, watchEffect, reactive} from 'vue'
import {useCounterStore} from '@/stores/counter'

// 使用 Vuex Store
const store = useCounterStore();
const time = ref(3);
let timer = null;

// 定义一个 reactive 对象来保存 form 数据
const form = reactive({
  tripId: '',
  passengerId: '',
  name: '',
  contact: '',
  startLocation: '',
  startLocationName: '',
  startLocationLongitude: '',
  startLocationLatitude: '',
  endLocation: '',
  passengers: ''
});

// 使用 watchEffect 来观察 store.message，并在其变化时更新 form 对象
watchEffect(() => {
  if (store.message) {
    // message 是一个 JSON 字符串，解析为 JavaScript 对象
    const data = JSON.parse(store.message);
    for (const key in data) {
      if (data.hasOwnProperty(key)) {
        form[key] = data[key];
      }
    }
  }
});

// 处理倒计时
const countFn = () => {
  if (time.value <= 0) {
    cancel();
    store.isDialogFalse();
  } else {
    timer = setTimeout(() => {
      time.value--;
      countFn();
    }, 1000);
  }
}

// 清除定时器并关闭对话框。
const immediatereturn = () => {
  clearTimeout(timer);
  store.isDialogFalse();
}

watch(() => store.dialogVisible, (newValue) => {
  if (newValue) {
    time.value = 20;
    countFn();
  } else {
    immediatereturn();
  }
});

// 取消函数
const cancel = () => {
  immediatereturn();

  // 发送 WebSocket 消息，表示拒绝接单
  if (store.websocket) {
    // 创建含有拒绝消息的对象，然后转化为 JSON 字符串并发送
    const cancelData = {
      message: '拒绝接单',
      passengerId: form.passengerId
    };
    store.websocket.send(JSON.stringify(cancelData));
  }
}

// 确认函数
const confirm = () => {
  immediatereturn();

  // 创建一个包含行程id和乘坐人数的对象
  const confirmData = {
    message: '同意接单',
    tripId: form.tripId,
    passengers: form.passengers,
    passengerId: form.passengerId
  };

  // 发送 WebSocket 消息，表示同意接单
  if (store.websocket) {
    // 将对象转化为 JSON 字符串并发送
    store.websocket.send(JSON.stringify(confirmData));
  }
};
</script>

<template>
  <router-view/>
  <el-dialog v-model="store.dialogVisible" title="阿达西接单" width="85%">
    <div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="乘客姓名">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="乘客电话">
          {{ form.contact }}
        </el-form-item>
        <el-form-item label="上车地点">
          {{ form.startLocationName }} - {{ form.startLocation }}
        </el-form-item>
        <el-form-item label="下车地点">
          {{ form.endLocation }}
        </el-form-item>
        <el-form-item label="乘客人数">
          {{ form.passengers }}
        </el-form-item>
      </el-form>
      <span CLASS="TIME">请在<span STYLE="color: red;font-size: 18PX">{{ time }}</span>秒内确定订单</span>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">拒绝接单</el-button>
        <el-button type="primary" @click="confirm">
          同意接单
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.TIME {
  margin-LEFT: 12PX;
}
</style>
